<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>图表统计</title>
  <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/iconfont.css">
  <link rel="stylesheet" href="css/main.css">
  <script src="./libs/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="./libs/echarts.js"></script>
  <script src="./libs/echarts.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row spannel_list">
      <div class="col-sm-3 col-xs-6">
        <div class="spannel">
          <em id="a_number">10015</em><span>篇</span>
          <b>总文章数</b>
        </div>
      </div>
      <div class="col-sm-3 col-xs-6">
        <div class="spannel scolor01">
          <em id="b_number">123</em><span>篇</span>
          <b>日新增文章数</b>
        </div>
      </div>
      <div class="col-sm-3 col-xs-6">
        <div class="spannel scolor02">
          <em id="c_number">35</em><span>条</span>
          <b>评论总数</b>
        </div>
      </div>
      <div class="col-sm-3 col-xs-6">
        <div class="spannel scolor03">
          <em id="d_number">123</em><span>条</span>
          <b>日新增评论数</b>
        </div>
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <div class="row curve-pie">
      <div class="col-lg-8 col-md-8">
        <div class="gragh_pannel" id="curve_show"></div>
      </div>
      <div class="col-lg-4 col-md-4">
        <div class="gragh_pannel" id="pie_show"></div>
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <div class="column_pannel" id="column_show"></div>
  </div>
</body>
<script src="./js/http.js"></script>
<script>
  $(function () {
    statistics();
    dily_data();
    chart_data()
  });
  function statistics() {
    mylink('get', '/admin/data/info', null, function (resData) {
      $('#a_number').html(resData.totalArticle);
      $('#b_number').html(resData.dayArticle);
      $('#c_number').html(resData.totalComment);
      $('#d_number').html(resData.dayComment);
    });
  }

  function dily_data() {
    mylink('get', '/admin/data/article', null, function (resData) {
      // console.log(resData.date);
      let x_date = [];
      let t_date = [];
      //for in 方法
      // for (let i in resData.date) {
      //   x_date[x_date.length] = resData.date[i].date;
      //   t_date[t_date.length] = resData.date[i].count;
      // }

      //forEach方法
      resData.date.forEach(item => {
        x_date.push(item.date);
        t_date.push(item.count)
      });

      line(x_date, t_date);
    });
  }

  function line(x_date, t_date) {
    var myChart = echarts.init(document.getElementById('curve_show'));

    // 指定图表的配置项和数据
    option = {
      title: {
        text: '日新增文章曲线图',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: x_date
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: t_date,
        type: 'line',
        smooth: true,
        label: {
          normal: {
            show: true,
            position: 'top'
          }
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 1, color: '#d6913a' },
              { offset: 0, color: '#188df0' },
            ]
          )
        },
        areaStyle: {
        }
      }]

    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }

  function chart_data() {
    mylink('get', '/admin/data/category', null, function (resData) {
      let date = resData.date;
      let res_date = date.map(date => ({ value: date.articles, name: date.name }));
      let resData_date = date.map(date => date.name);
      chart(res_date, resData_date)
    });
  }

  function chart(res_date, resData_date) {
    var myChart = echarts.init(document.getElementById('pie_show'));

    // 指定图表的配置项和数据
    option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        data: resData_date
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          emphasis: {
            label: {
              show: true,
              fontSize: '20',
              fontWeight: 'bold'
            }
          },
          data: res_date
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
  column_data()
  function column_data() {
    mylink('get', '/admin/data/visit', null, function (resData) {
      let date = resData.data;
      let x_date = [];
      let t_date = [];
      //for in 方法
      // for (let i in resData.date) {
      //   x_date[x_date.length] = resData.date[i].date;
      //   t_date[t_date.length] = resData.date[i].count;
      // }

      //forEach方法
      for (let key in date) {
        console.log();
        x_date.push(key);
        t_date.push(date[key]);
      };
      column(x_date, t_date);
    });
  }

  function column(x_date, t_date) {
    var myChart = echarts.init(document.getElementById('column_show'));

    // 指定图表的配置项和数据
    option = {
      color: ['#3398DB'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: x_date,
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '直接访问',
          type: 'bar',
          barWidth: '60%',
          data: t_date,
          barWidth: 50
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }

</script>

</html>